<template>
  <div>
    <van-nav-bar class="nav-bar">
      <template #left>
        <van-icon name="smile" size="18" class="smile" />
        <span>诚信注册家服员</span>
      </template>
    </van-nav-bar>
    <!-- 推荐内容 -->
    <div class="content-box">
      <!-- 具体员工的显示的盒子 -->
      <div v-for="item in server" :key="item.id" class="recom-content" @click="$router.push('/YuesaoDetails')">
        <van-image class="avatar" src="" fit="cover" />
        <span class="name">{{ item.name }}</span>
        <span class="price"><strong>{{ item.price }} / </strong>26天</span>
        <div class="flag">
          <span>{{ item.flag.level }}</span>
          <span>{{ item.flag.experience }}</span>
        </div>
        <div class="detail-info">
          {{ item.position }} | {{ item.age }} | {{ item.deal }} | {{ item.comment }}
        </div>
      </div>
      <!-- /具体员工的显示的盒子 -->
      <!-- 具体员工的显示的盒子 -->
      <!-- <div class="recom-content">
        <van-image class="avatar" src="" fit="cover" />
        <span class="name">张丽丽</span>
        <span class="price"><strong>8000元 / </strong>26天</span>
        <div class="flag">
          <span>二星育婴师</span>
          <span>6年经验</span>
        </div>
        <div class="detail-info">
          湖南长沙 | 41岁 | 服务13户 | 评价13条
        </div>
      </div> -->
      <!-- /具体员工的显示的盒子 -->
      <!-- 更多服务员 -->
      <div class="more">
        <van-button color="#7B7777" plain @click="$router.push('/server')">更多家务员 ></van-button>
      </div>
      <!-- /更多服务员 -->
    </div>
    <!-- /推荐内容 -->
  </div>
</template>

<script>
import { getServerInfo } from '@/api/index.js'
export default {
  data () {
    return {
      server: {}
    }
  },
  created () {
    // const { result } =  getServerInfo()
    this.getServerInfo()
  },
  mounted () {

  },
  methods: {
    async getServerInfo () {
      const { data } = await getServerInfo()
      this.server = data
      // console.log(data)
    }
  }
}
</script>

<style scoped lang="less">
.nav-bar {
  border-bottom: 1px solid rgba(240, 238, 238, 100);
  z-index:1;
}
.smile {
  color: rgba(151, 145, 145, 100);
  margin-left: 20px;
  margin-right: 20px;
}
.content-box { // 内容最大的容器
  padding: 0 16px;
  .recom-content:nth-of-type(4) {
    border-bottom: none;
  }
  .recom-content { // 每个员工信息的小容器
    position: relative;
    border-bottom: 1px solid #F0EEEE;
    padding-top: 24px;
    .avatar {
      width: 160px;
      height: 160px;
    }
    .name {
      position: absolute;
      top: 24px;
      left: 182px;
      font-size: 28px;
    }
    .price {
      position: absolute;
      top: 24px;
      left: 530px;
      font-size: 26px;
      color:#979191;
    }
    .flag {
      height: 46px;
      display: inline-block;
      position: absolute;
      top: 86px;
      left: 182px;
      display: flex;
      span {
        padding: 10px;
        margin-right: 5px;
        border: 1px solid #3F51B5;
        border-radius: 46px;
        font-size: 20px;
        // margin-right: 16px;
        color: #3F51B5;
      }
    }
    .detail-info {
      position: absolute;
      top: 150px;
      left: 182px;
      font-size: 24px;
      color: #979191;
    }
  }
  .recom-content:last-child{
    border-bottom: none;
  }
  .more {
    text-align: center;
    .van-button {
      border: none;
      font-size: 24px;
    }
  }
}
</style>
